<template>
  <!--忘记密码-->
  <div class="forget-password">
    <div class="forget-password-return">
      <el-button plain icon="el-icon-back" type="text" @click="returnTo()">返回</el-button>
    </div>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px">
      <img src="./../assets/logo.png" draggable="false">
      <el-form-item prop="mobileNumber">
        <el-input v-model="ruleForm.mobileNumber" placeholder="用户账号绑定的手机号码"></el-input>
      </el-form-item>
    </el-form>
    <el-button type="primary" round size="medium" @click="next = true;step()">下一步</el-button>
    <el-link :underline="false" href="/#/">登录</el-link>|
    <el-link :underline="false" href="/#/sign-up">注册</el-link>
    <el-dialog title="修改密码" :visible.sync="next">
      <h3>验证码已发送到手机号码：{{ruleForm.mobileNumber}}</h3>
      <el-form :model="dialog_ruleForm" :rules="dialog_rules" ref="ruleForm">
        <el-form-item prop="password">
          <el-input type="password" v-model="dialog_ruleForm.password" autocomplete="off" placeholder="新密码"></el-input>
        </el-form-item>
        <el-form-item prop="checkPassword">
          <el-input type="password" v-model="dialog_ruleForm.checkPassword" autocomplete="off" placeholder="确认新密码"></el-input>
        </el-form-item>
        <el-form-item prop="mobileCode">
          <el-input v-model="dialog_ruleForm.mobileCode" autocomplete="off" placeholder="验证码"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="next = false">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </div>
    </el-dialog>
    <div class="forget-password-power">
      © 2021 Powered by zsc ccying
    </div>
  </div>
</template>

<style>
  .forget-password {
    width: 600px;
    margin: auto;
  }
  .forget-password-return {
    padding-right: 600px;
  }
  .forget-password-power {
    padding-top: 100px;
  }
</style>

<script>
  export default {
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入新密码'));
        } else {
          if (this.dialog_ruleForm.checkPassword !== '') {
            this.$refs.ruleForm.validateField('checkPassword');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.dialog_ruleForm.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        next: false,
        ruleForm: {
          mobileNumber: ''
        },
        dialog_ruleForm: {
          password: '',
          checkPassword: '',
          mobileCode: ''
        },
        rules: {
          mobileNumber: {
            required: true, message: '请输入用户账号绑定的手机号码', trigger: 'blur'
          },
        },
        dialog_rules: {
          password: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPassword: [
            { validator: validatePass2, trigger: 'blur' }
          ],
          mobileCode: {
            required: true,  message: '请输入验证码', trigger: 'blur'
          }
        }
      }
    },
    methods: {
      returnTo() {
        this.$router.go(-1);
      },
      step() {
        this.$http({
          method: 'get',
          url: '/send',
          params: {
            mobileNumber: this.ruleForm.mobileNumber
          }
        })
      },
      submit() {
        let encodePassword = window.btoa(this.dialog_ruleForm.password);
        this.$http({
          method: 'post',
          url: '/reset-password',
          data: this.$qs.stringify({
            mobileNumber: this.ruleForm.mobileNumber,
            mobileCode: this.dialog_ruleForm.mobileCode,
            password: encodePassword
          })
        }).then(res=>{
          let {code:code, data:data} = res.data;
          if (code === 200) {
            var user = JSON.stringify(data);
            sessionStorage.setItem('user', user);
            alert("重置密码成功")
            this.$router.push('/');
          } else if (code === 1400) {
            alert("手机验证码错误");
          } else if (code === 1100) {
            alert("用户账号不存在");
          } else {
            alert("重置密码失败，未知错误");
          }
        })
      }
    }
  }
</script>
